<template>
  <a-drawer
    :width="340"
    :mask-closable="false"
    :visible="visible"
    unmount-on-close
    :ok-loading="loading"
    @ok="onOk"
    @cancel="close">
    <template #title>
      {{ title }}
    </template>
    <div>
      <a-form
        ref="form"
        layout="vertical"
        :model="form"
        :disabled="disabled"
        :style="{width:'100%'}">
        <a-form-item
          field="clientId"
          label="客户端id："
          :disabled="type !== Operation.CREATE"
          :rules="[{required: true, message:'请输入客户端id'}]">
          <a-input v-model="form.clientId" placeholder="请输入客户端id" allow-clear />
        </a-form-item>
        <a-form-item
          field="clientSecret"
          label="客户端秘钥："
          :rules="[{required: true, message:'请输入客户端秘钥'}]">
          <a-input v-model="form.clientSecret" placeholder="请输入客户端秘钥" allow-clear />
        </a-form-item>
        <a-form-item
          field="scope"
          label="域：">
          <a-input v-model="form.scope" placeholder="请输入域" allow-clear />
        </a-form-item>
        <a-form-item field="autoapprove" label="自动放行：">
          <a-switch
            v-model:model-value="form.autoapprove"
            type="round"
            checked-value="true"
            unchecked-value="false"
          >
            <template #checked>
              是
            </template>
            <template #unchecked>
              否
            </template>
          </a-switch>
        </a-form-item>
        <a-form-item
          field="authorizedGrantTypes"
          label="授权模式：">
          <a-select v-model="grantTypes" placeholder="请输入授权模式" allow-create multiple allow-clear>
            <a-option value="password">账号密码模式</a-option>
            <a-option value="authorization_code">授权码模式</a-option>
            <a-option value="client_credentials">客户端模式</a-option>
            <a-option value="refresh_token">刷新令牌模式</a-option>
            <a-option value="mobile_password">手机号密码模式</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          field="accessTokenValidity"
          label="令牌时效：">
          <a-input-number v-model="form.accessTokenValidity" placeholder="请输入令牌时效" allow-clear />
        </a-form-item>
        <a-form-item
          field="refreshTokenValidity"
          label="刷新时效：">
          <a-input-number v-model="form.refreshTokenValidity" placeholder="请输入刷新时效" allow-clear />
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>

<script>
import useLoading from "@/hooks/loading";
import {Operation} from "@/types/global";
import {create, findById, update} from "@/api/modules/system/client";

const { loading, setLoading } = useLoading()
export default {
  name: "ClientBoard",
  emits: ['ok'],
  data() {
    return {
      visible: false,
      title: '',
      loading,
      form: {},
      Operation,
      type: '',
      disabled: false,
      grantTypes: []
    }
  },
  methods: {
    async open(id, type) {
      if (id) {
        const { data } = await findById(id)
        this.form = data
        this.grantTypes = data.authorizedGrantTypes.split(',')
      }
      this.disabled = type === Operation.PREVIEW
      this.title = type
      this.type = type
      this.visible = true
    },
    close() {
      this.visible = false
      this.form = {}
      this.title = ''
      this.type = ''
    },
    onOk() {
      if (this.type === Operation.PREVIEW) {
        this.close()
        return
      }
      this.$refs.form.validate(async errors => {
        if (!errors) {
          try {
            setLoading(true)
            this.form = {
              ...this.form,
              authorizedGrantTypes: this.grantTypes.join(',')
            }
            if (this.type === Operation.CREATE) {
              await create(this.form)
            } else {
              await update(this.form)
            }
            this.close()
            this.$emit('ok')
          } finally {
            setLoading(false)
          }
        }
      })
    }
  }
};
</script>

<style scoped>

</style>
